<template>
  <div class="welfare-notice">
    <img src="@/assets/gongshibgai.png" alt="">        
    <div class="welfare-item pb0">
      <p class="notice-title">十月份公益项目活动公示</p>
      <p class="time">2018.11.16</p>
      <div class="work">
        <p class="cons">2018年3月-8月财务支出明细概括：本次项目至今筹集善款326415.23元，总支出294562.21元，帮助198名地中海贫血儿童完成了：输血排铁、切脾手术、造血干细胞移植等治疗。此项目由智保天赋基金会开展并执行。</p>
        <p class="type-img img"><img src="@/assets/chengrenceshi03.png" alt=""></p>
        <p class="cons">本次项目覆盖地贫高发地区：广东、文本、海南、湖南、江西等，资助类型主要是：资助输血排铁等常规治疗、资助切脾手术、资助造血干细胞手术。</p>
        <p class="cons">随着项目的持续开展，接下来会陆续公示善款具体使用汇报及反馈。</p>
      </div>
    </div>
    <div class="section">
      <div class="section-top clear">
        <span class="title">关爱留守儿童计划 捐款记录</span>
        <span class="more">查看更多 <img class="arrow" src="@/assets/fanhui01.png" alt=""></span>
      </div>
      <div class="list">
        <div class="item">
          <span class="name">杜*娟</span>
          <span class="phone">138****2563</span>
          <span class="price">捐款<em>320.00</em>元</span>
        </div>
        <div class="item">
          <span class="name">杜*娟</span>
          <span class="phone">138****2563</span>
          <span class="price">捐款<em>320.00</em>元</span>
        </div>
        <div class="item">
          <span class="name">杜*娟</span>
          <span class="phone">138****2563</span>
          <span class="price">捐款<em>320.00</em>元</span>
        </div>
        <div class="item">
          <span class="name">杜*娟</span>
          <span class="phone">138****2563</span>
          <span class="price">捐款<em>320.00</em>元</span>
        </div>
        <div class="item">
          <span class="name">杜*娟</span>
          <span class="phone">138****2563</span>
          <span class="price">捐款<em>320.00</em>元</span>
        </div>
      </div>
    </div>
    <div class="section border-none">
      <div class="section-top clear" @click="router({path: './contribuList'})">
        <span class="title">新疆青少儿健康饮水计划 捐款记新疆青少儿健康饮水计划 捐款记...</span>
        <span class="more">查看更多 <img class="arrow" src="@/assets/fanhui01.png" alt=""></span>
      </div>
      <div class="list">
        <div class="item">
          <span class="name">杜*娟</span>
          <span class="phone">138****2563</span>
          <span class="price">捐款<em>320.00</em>元</span>
        </div>
        <div class="item">
          <span class="name">杜*娟</span>
          <span class="phone">138****2563</span>
          <span class="price">捐款<em>320.00</em>元</span>
        </div>
        <div class="item">
          <span class="name">杜*娟</span>
          <span class="phone">138****2563</span>
          <span class="price">捐款<em>320.00</em>元</span>
        </div>
        <div class="item">
          <span class="name">杜*娟</span>
          <span class="phone">138****2563</span>
          <span class="price">捐款<em>320.00</em>元</span>
        </div>
        <div class="item">
          <span class="name">杜*娟</span>
          <span class="phone">138****2563</span>
          <span class="price">捐款<em>320.00</em>元</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import newsList from '@/components/newsList'
import 'swiper/dist/css/swiper.css'

  export default {
    components: {
      swiper,
      swiperSlide,
      newsList
    },
    data () {
      return {
        bannerHome: {
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        },
      }
    },
    created () {
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
    }
  }
</script>

<style lang="stylus" scoped>
.welfare-notice
  min-height 100vh
  background-color #f5f5f5
  .welfare-item
    padding 0 1.5rem
    padding-bottom 2rem
    background-color #fff
    .notice-title
      color #333
      font-size 1.7rem
      height 1.7rem
      line-height 1.7rem
      font-weight 800
      padding-top 2rem
    .time
      color #999
      font-size 1.2rem
      line-height 1.8rem
      margin-top .6rem
    .work
      margin-top 2.5rem
      overflow hidden
      .img
        position relative
        left 50%      
      .type-img
        width 11.8rem
        margin-left -5.9rem
        margin-bottom 2rem
      .cons
        font-size 1.3rem
        color #666
        line-height 2.4rem
        margin-bottom 1.8rem
  .section
    background-color #fff
    padding 0 1.5rem
    margin-bottom 1rem
    &:last-child
      .section-top
        border none
    .section-top
      padding-top 3rem
      padding-bottom 2rem
      border-top 1px solid #e6e6e6
      .title
        color #333
        font-size 1.8rem
        line-height 1.8rem
        font-weight bold
        display block
        width calc(100% - 8rem)
        float left
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
      .more
        color #999
        font-size 1.3rem
        line-height 1.8rem
        float right
        position relative
        padding-right 1rem
        .arrow
          width .4rem
          position absolute
          right 0
          top .55rem
    .list
      .item
        display flex
        border-bottom 1px solid #e6e6e6
        &:last-child
          border none
        span
          flex 1
          font-size 1.5rem
          color #999
          line-height 5rem
        .name
          width 7rem
          max-width 7rem
          white-space nowrap
          text-overflow ellipsis
          overflow hidden
        .phone
          flex 2
        .price
          flex 1.5
          text-align right
          em
            color #A81E27
  .border-none
    border none
</style>
